<template>
	<view class="box">
		<u-navbar title="赚钱" titleStyle="color:#000" bgColor="transparent" :autoBack="true">
		</u-navbar>
		<u-loading-page :loading="lodingPage" loadingMode="spinner" :fontSize="32" :iconSize="56"></u-loading-page>
		<view v-show="!lodingPage">
			<image :src="staticRoot + 'money1.png'" v-show="!isranking" class="img" :lazy-load="true" @load="loadPage">
			</image>
			<image :src="staticRoot + 'money2.png'" v-show="isranking" class="img" :lazy-load="true"></image>
			<view class="num">
				<u-count-to ref="countTo" :startVal="Number(centerDetail.distribut_money)"
					:endVal="Number(centerDetail.distribut_money_can)" color="#F93938" fontSize="180rpx"
					:autoplay="false"></u-count-to>
			</view>
			<button class="btn1 btn" open-type="share">
				<view style="position: relative;">
					<view class="son">
						<u-icon name="weixin-fill" color="#a95335" size="45rpx"></u-icon>
						<view class="names">
							邀请好友
						</view>
					</view>
				</view>
			</button>

			<!-- <button class="btn2 btn">
				<view style=" position: relative;">
					<view class="son">
						<u-icon name="moments" color="#a95335" size="45rpx"></u-icon>
						<view class="names">
							分享到朋友圈
						</view>
					</view>
				</view>
			</button> -->

			<!-- 活动规则 -->
			<view class="events" @click="showRule=true">
				活动规则
			</view>

			<!-- 收入 提现 -->
			<view class="income">
				<view class="left">
					<view class="">我的收入：</view>
					<view class="money">{{Number(centerDetail.distribut_money)}}</view>
					<view class="">元</view>
				</view>
				<view class="right" @click="$navTo('pages/mines/withdraw')">
					我要提现>>
				</view>
			</view>

			<view class="title">
				<view class="l" @click="changeDataList" :style="!isranking?'color: #BE0000;':'color:#fff'">
					已邀请
				</view>
				<view class="r" @click="changeDataList" :style="isranking?'color: #BE0000;':'color:#fff'">
					排行榜
				</view>
			</view>

			<view class="ranking">
				<view class="nav" v-if="!isranking">
					<view class="left1">用户</view>
					<view class="left2">已下单</view>
					<view class="left3">
						<u--text text="收入" color="#B4B4B4" size="28rpx" align="center" iconStyle="color:#B4B4B4"
							suffixIcon="question-circle"></u--text>
					</view>
				</view>
				<view class="nav" v-if="isranking">
					<view class="left1">排名</view>
					<view class="left2">用户</view>
					<view class="left3">累计收入</view>
				</view>

				<view class="li-box" v-if="!isranking">
					<view class="li" v-for="(item,i) in dataList" :key="item.user_id">
						<view class="left1">
							<image :src="item.head_pic" class="img" :lazy-load="true"></image>
							<view class="name oneline-hide">
								{{item.nickname}}
							</view>
						</view>
						<view class="left2">
							{{item.orderNum ? '是' : '否'}}
						</view>
						<view class="left3">
							<view class="rmb">
								{{item.fee}}元
							</view>
							<!-- <view class="rmb-btn" v-if="i === 1">
								提醒TA下单
							</view> -->
						</view>
					</view>
				</view>

				<view class="li-box" v-else>
					<view class="li" v-for="(item,i) in dataList" :key="item.user_id">
						<view class="left2">
							{{i+1}}
						</view>
						<view class="left1">
							<image :src="item.head_pic" class="img" :lazy-load="true"></image>
							<view class="name">
								{{item.nickname}}
							</view>
						</view>
						<view class="left3">
							<view class="rmb">
								{{item.fee}}元
							</view>
						</view>
					</view>
				</view>

			</view>

			<u-modal :show="showRule" title="活动说明" :showConfirmButton="false" closeOnClickOverlay @close="showRule=false">
				<scroll-view scroll-y="true" style="max-height: 50vh;">
					<view class="slot-content" style="font-size: 26rpx;">
						<u-parse :content="content"></u-parse>
					</view>
				</scroll-view>
			</u-modal>

		</view>
	</view>
</template>

<script>
	import {
		DistributionApi,
		UserApi
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				// 页面加载
				lodingPage: true,
				// 静态资源
				staticRoot: this.$staticRoot,
				isranking: false, //是不是排行榜
				showRule: false,
				// 规则
				content: '',
				// 分销中心
				centerDetail: {},
				// 邀请列表/排行榜
				dataList: [],
				// 邀请码
				// inviteCode: null,
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
			this.getData()
		},
		onShareAppMessage() {
			// if (!this.inviteCode) {
			// 	this.$showToast('未获取到邀请码，请重试')
			// } else {}
			return {
				title: '分享',
				path: `/pages/index/index?inviteCode=${this.userInfo.user_id}`,
			}
		},
		methods: {
			// 懒加载页面
			loadPage() {
				if (!Object.keys(this.centerDetail).length)
					return
				this.lodingPage = false
				// 延迟滚动
				const timer = setTimeout(() => {
					this.$refs.countTo.start()
				}, 500)
			},
			// 获取数据
			async getData() {
				try {
					// 分销中心
					const centerRes = await DistributionApi.distributeCenter()
					const explain = await DistributionApi.getCommissionNote()
					this.centerDetail = centerRes.result
					this.content = explain.result.active
					// 加载完毕
					this.loadPage()
					// 获取列表
					this.getDataList()
				} catch (err) {
					console.log('getData err', err);
					this.$showToast(err || '加载数据失败')
				}
			},
			// 获取数据列表
			async getDataList() {
				try {
					// const inviteRes = await DistributionApi.myCode()
					// this.inviteCode = inviteRes.result
					if (!this.isranking) {
						// 邀请列表
						const teamList = await DistributionApi.getMineTeam()
						this.dataList = teamList.result.rows
					} else {
						// 排行榜列表
						const rankList = await DistributionApi.getRank({
							type: 1, // 默认取年度
						})
						this.dataList = rankList.result.rank
					}
				} catch (err) {
					this.$showToast(err || '获取失败')
				}
			},
			changeDataList() {
				this.isranking = !this.isranking
				this.getDataList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 去除加载过渡效果
	::v-deep .u-transition {
		transition-duration: 0ms !important;
	}

	// 清除按钮样式
	button {
		margin: 0;
		padding: 0;

		&::after {
			border: none;
		}
	}

	.box {
		width: 100vw;
		box-sizing: border-box;

		.ranking {
			position: absolute;
			top: 1500rpx;
			left: 30rpx;
			width: calc(100% - 60rpx);
			height: 727rpx;
			box-sizing: border-box;
			padding: 30rpx;

			// border: 1rpx solid #000;
			.left1 {
				flex: 0 0 44%;
			}

			.left2,
			.left3 {
				flex: 0 0 28%;
			}

			.nav {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #B4B4B4;
				margin-bottom: 30rpx;

				>view {
					text-align: center;
				}
			}

			.li-box {
				overflow-y: auto;
				width: 100%;
				height: calc(100% - 70rpx);
			}

			.li {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #000;
				margin-bottom: 30rpx;

				>view {
					text-align: center;
				}

				.left1 {
					display: flex;
					align-items: center;

					.img {
						width: 67rpx;
						height: 67rpx;
						margin-right: 16rpx;
						border-radius: 50%;
					}

				}

				.left3 {
					color: #ff0000;

					.rmb-btn {
						width: 162rpx;
						height: 58rpx;
						border-radius: 50rpx;
						opacity: 1;
						border: 1rpx solid #d8d8d8;
						background: #ff0000;
						color: #fff;
						text-align: center;
						line-height: 58rpx;
						font-size: 24rpx;
					}
				}

			}
		}

		.title {
			position: absolute;
			top: 1442rpx;
			left: 160rpx;
			width: calc(100% - 320rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #BE0000;
			font-size: 28rpx;

			>view {
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 300rpx;
					height: 70rpx;
				}
			}
		}

		.income {
			position: absolute;
			left: 60rpx;
			top: 1320rpx;
			width: calc(100% - 120rpx);
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			color: #fff;
			font-size: 30rpx;
			height: 76rpx;

			.left {
				display: flex;
				align-items: flex-end;

				.money {
					font-size: 76rpx;
					line-height: 76rpx;
				}

				.right {}
			}
		}

		.events {
			position: absolute;
			top: 358rpx;
			right: 0;
			width: 70rpx;
			line-height: 35rpx;
			font-size: 24rpx;
			text-align: center;
			color: #fff;
			height: 71rpx;
			background-color: #fd0e25;
			border-radius: 20rpx 0 0 20rpx;
		}

		.btn {
			width: 332rpx;
			height: 115rpx;
			border-radius: 50rpx;
			opacity: 1;
			border: 1rpx solid #d8d8d8;
			background: linear-gradient(180deg, #fff9ee 0%, #ffd3a6 74%, #f39b77 100%);
			box-shadow: 0 3rpx 6rpx 0 #a700005c;

			// test
			width: 550rpx;

			.son {
				position: absolute;
				top: 0;
				left: 0;
				width: 324rpx;
				height: 87rpx;
				border-radius: 50rpx;
				border: 4rpx solid #fff0cc;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #a04425;
				font-size: 30rpx;
				box-sizing: border-box;

				// test
				width: 100%;
			}
		}

		.btn1 {
			position: absolute;
			top: 1110rpx;
			// left: 26rpx;

			// test
			left: 50%;
			transform: translateX(-50%);
		}

		.btn2 {
			position: absolute;
			top: 1110rpx;
			right: 26rpx;
		}

		.num {
			position: absolute;
			top: 395rpx;
			right: 334rpx;
			// width: 133rpx;
			height: 238rpx;
			opacity: 1;
			color: #f93938;
			text-align: left;
			font-size: 238rpx;
			font-weight: 400;
			font-family: "Source Han Sans";
			line-height: 238rpx;

		}

		.img {
			width: 750rpx;
			height: 2480rpx;
			opacity: 1;
			background: #f6f6f8;

		}
	}
</style>